<template>
    <div class="steelPriceInfo app-container">
      <div class="echarts_averagePrice">
        <div class="c_chart_l">
          <div class="c_chart_selet">
            <p class="headline">全国平均价格</p>
            <div class="selet_radio">
              <el-radio-group v-model="days" size="small" fill="#409EFF" @input="daysSelectOnly">
                <el-radio-button label="10"></el-radio-button>
                <el-radio-button label="15"></el-radio-button>
                <el-radio-button label="30"></el-radio-button>
              </el-radio-group>
              <el-select v-model="dateVal" placeholder="请选择" size="small" @change="dateChange">
                <el-option
                  v-for="(item,i) in daysList"
                  :key="i"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="c_chart_price">
            <p>
              <span class="price_big">{{ priceData.nationwideAvgPrice }}</span>
              <span class="unit_small">元/吨</span>
            </p>
            <div class="min_max">
              <p>最高：
                <span class="colorRed">{{priceData.maxCityPrice.price}}元</span>
                <span class="leftDistance colorRed">{{priceData.maxCityPrice.region_name}}</span>
              </p>
              <p>最低：
                <span class="colorGreen">{{priceData.minCityPrice.price}}元</span>
                <span class="leftDistance colorGreen">{{priceData.minCityPrice.region_name}}</span>
              </p>
            </div>
          </div>
          <div id="maychar" style="width: 1067px; height: 350px"></div>
        </div>
        
        <div class="average_Price_r">
          <div class="headline">区域平均价格</div>
          <el-table
            :data="regionAvgPrice"
            style="width: 100%">
            <el-table-column
              prop="region_name"
              align="center"
              label="区域">
            </el-table-column>
            <el-table-column
              prop="provincePrice"
              align="center"
              label="价格">
            </el-table-column>
            <el-table-column
              prop="upsAndDownsPrices"
              align="center"
              label="涨跌">
              <template slot-scope="scope">
                  <!-- <div class="red" v-if="scope.row.state == '2'">撤销</div>
                  <div class="red" v-if="scope.row.state == '1'&&scope.row.is_first == 1">领先</div>
                  <div v-if="scope.row.state == '1'&&scope.row.is_first == 0">出局</div> -->
                  <p v-if="scope.row.upsAndDowns == 1" style="color:#DF0000"><i class="el-icon-top"></i>{{scope.row.upsAndDownsPrices}}</p>
                  <p v-else-if="scope.row.upsAndDowns == 0">--</p>
                  <p v-else style="color:#0ab86c"><i class="el-icon-bottom"></i>{{scope.row.upsAndDownsPrices}}</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 各省份平均价 -->
    <div class="q_provinceSecond">
      <div class="q_p_title">各省份平均价</div>
        <div class="q_p_card">
          <el-card shadow="hover" v-for="(item,i) in provinceAvgPrice" :key="i">
            <div class="card_name">{{item.region_name}}</div>
            <div class="row_p">
              <div class="row_p_l">
                <p>今日均价</p>
                <p>{{item.provincePrice}}元</p>
              </div>
              <div class="row_p_l">
                <p>今日涨跌</p>
                <p v-if="item.upsAndDowns == 1" style="color:#DF0000"><i class="el-icon-top"></i>{{item.upsAndDownsPrices}}</p>
                <p v-else-if="item.upsAndDowns == 0">--</p>
                <p v-else style="color:#0ab86c"><i class="el-icon-bottom"></i>{{item.upsAndDownsPrices}}</p>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <!-- 全国主要城市价格汇总 -->
      <div class="q_provinceSecond margin_bot">
        <div class="q_p_title">全国主要城市价格汇总</div>
        <div class="q_p_con">
          <div>
            <p class="q_p_ward"><i class="el-icon-map-location"></i>华东地区（上海、山东、江苏、安徽、浙江、江西、福建）</p>
            <cardBox :city-card="cityPrice.eastWard"/>
          </div>
          <div>
            <p class="q_p_ward"><i class="el-icon-map-location"></i>华南地区（广东,广西）</p>
            <cardBox :city-card="cityPrice.southWard"/>
          </div>
          <div>
            <p class="q_p_ward"><i class="el-icon-map-location"></i>华中地区（湖北,湖南,河南）</p>
            <cardBox :city-card="cityPrice.centreWard"/>
          </div>
          <div>
            <p class="q_p_ward"><i class="el-icon-map-location"></i>华北地区（北京,天津,河北,山西,内蒙古）</p>
            <cardBox :city-card="cityPrice.northWard"/>
          </div>
          <div>
            <p class="q_p_ward"><i class="el-icon-map-location"></i>西北地区（甘肃,青海,宁夏,新疆,陕西）</p>
            <cardBox :city-card="cityPrice.westNorthWard"/>
          </div>
          <div>
            <p class="q_p_ward"><i class="el-icon-map-location"></i>西南地区（四川,云南,贵州,重庆）</p>
            <cardBox :city-card="cityPrice.westSouthWard"/>
          </div>
          <div>
            <p class="q_p_ward"><i class="el-icon-map-location"></i>东北地区（辽宁,吉林,黑龙江）</p>
            <cardBox :city-card="cityPrice.eastNorthWard"/>
          </div>
        </div>
      </div>
    </div>
  </template>
  
<script>
  import {StatisticsData,quotationListTime} from '@/api/release'
  import cardBox from './cardBox.vue'
  export default {
    name: 'steelPriceInfo',
    components:{
      cardBox
    },
    data(){
      return{
        days:'10',
        dateVal:"",
        daysList:[],//重废行情日期
        regionAvgPrice:[], //区域平均价格
        priceData:{
          maxCityPrice:'',
          minCityPrice:'',
          nationwideAvgPrice:''
        },//最高最低价的两个城市

        StatisticsChartDate:[],
        StatisticsChartPrice:[],
        provinceAvgPrice:[], //各省份平均价
        max:'',
        min:'',
        cityPrice:{
          northWard:[],
          eastWard:[],
          southWard:[],
          centreWard:[],
          westNorthWard:[],
          westSouthWard:[],
          eastNorthWard:[],
        },//全国主要城市价格汇总
      }
    },
    created() {
      this.getDays();
    },
    methods:{
      // ----------日期下拉数据--------------
      getDays(){
        quotationListTime().then(res =>{
          this.daysList = res.data.timeData;
          this.dateVal = res.data.timeData[0];
          this.getList(this.days,res.data.timeData[0]);
        })
      },
      // ------获取页面数据---------
      getList(days,date){
        StatisticsData({days:days,date:date}).then(res=>{
          this.StatisticsChartDate = res.data.StatisticsChart.StatisticsChartDate; //chat日期
          this.StatisticsChartPrice = res.data.StatisticsChart.StatisticsChartPrice; ////chat 钱
          this.regionAvgPrice = res.data.regionAvgPrice;  //区域平均价格
          this.priceData.maxCityPrice = res.data.priceData.maxCityPrice; //最高最低价的两个城市
          this.priceData.minCityPrice = res.data.priceData.minCityPrice; //最高最低价的两个城市
          this.priceData.nationwideAvgPrice = res.data.priceData.nationwideAvgPrice; //最高最低价的两个城市
          this.cityDataDispose(res.data.cityPrice);//全国主要城市价格
          this.provinceAvgPrice = res.data.provinceAvgPrice; //各省份平均价
          this.max = Math.max.apply(null, this.StatisticsChartPrice); //最大值
          this.min = Math.min.apply(null, this.StatisticsChartPrice); //最小值
          this.showEcharts();
        })
      },
      // -------------数据处理-全国主要城市价格---------------------
      cityDataDispose(data){
      
        data.forEach((item, index, array) => {
          switch (item.regionid) {
            case 1:      //华北地区 northWard
                this.cityPrice.northWard.push(item);       
                break;    
            case 15:      //15华东地区 eastWard
                this.cityPrice.eastWard.push(item);         
                break;    
            case 38:      //38华南地区  southWard
                this.cityPrice.southWard.push(item);       
                break;    
            case 45:       //45华中地区  centreWard
                this.cityPrice.centreWard.push(item);         
                break;    
            case 53:       //53西北地区   westNorthWard
                this.cityPrice.westNorthWard.push(item);      
                break;    
            case 64:       //64西南地区   westSouthWard
                this.cityPrice.westSouthWard.push(item);        
                break;     
            case 73:      //73东北地区    eastNorthWard
                this.cityPrice.eastNorthWard.push(item);         
                break;    
          } 
        });
      },
      // -------------选择天数-------------
      daysSelectOnly(label){
        this.getList(label,this.dateVal);
      },
      dateChange(label){
        this.getList(this.days,label);
      },
      showEcharts(){
        // this.max = Math.max.apply(null, this.StatisticsChartPrice); //最大值
        // this.min = Math.min.apply(null, this.StatisticsChartPrice); //最小值
        this.$nextTick(() => {
          var echarts = require('echarts');
          var myChart = echarts.init(document.getElementById('maychar'));
          // 设置配置项
          const option = {
            // color: ['#32E5FF'],
            color: ["#562E02"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: { backgroundColor: "#6a7985" },
              },
            },
            grid: {
              top: "10%",
              left: "10%",
              right: "10%",
              bottom: "10%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: this.StatisticsChartDate,
              boundaryGap: false, // 坐标两侧是否留白
              axisTick: {
                show: false, // 是否显示刻度线
              },
            },
            yAxis: [
              {
                type: "value",
                min:this.min, //取最小值为最小刻度
                max:this.max, //取最大值为最大刻度
                scale: true, //自适应
                axisLabel: {
                  color: "#562E02", // y 轴文字颜色
                },
                axisLine: {
                  show: true,
                },
                splitLine: {
                  show: false,
                },
              },
              {
                type: "value",
                name: "(元/吨)",
                position: "left",
                alignTicks: true,
                nameGap: 8,
                axisLine: {
                  show: false, // 是否显示 y 轴轴线
                },
                axisLabel: {
                  formatter: "{value}",
                },
                nameTextStyle: {
                  padding: [0, 10, 8, 0], // 单位位置
                },
              },
            ],
            series: [
              {
                type: "line",
                smooth: true, // 平滑显示
                name: "折线图",
                data: this.StatisticsChartPrice,
                itemStyle: {
                  color: "#cc0000", // 数据颜色  #FEADA4  #FFE4E1
                  gradientColorNum: 1,
                },
                areaStyle: {
                  color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0.1,
                        color: "rgba(211, 0, 0, 1) ", // 0% 处的颜色 rgba(6, 252, 254, 0.1) rgba(232, 105, 14, 1)
                      },
                      {
                        offset: 0.3,
                        color: "rgba(205, 1, 1, 0.8) ", // 0% 处的颜色 rgba(6, 252, 254, 0.1) rgba(232, 105, 14, 1)

                      },
                      {
                        offset: 0.5,
                        color: "rgba(205, 1, 1, 0.5)", // 0% 处的颜色  rgba(244, 106, 106, 0.8)
                      },
                      {
                        offset: 0.8,
                        color: "rgba(205, 1, 1, 0.2)", // 0% 处的颜色
                      },
                      {
                        offset: 0.9,
                        color: "rgba(205, 158, 123,0.2)", // 100% 处的颜色
                      },
                    ],
                  },
                },
              },
            ],
          };
          myChart.setOption(option);
        });
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .steelPriceInfo {
    color: #303133;
    //公共style
    .headline{
      font-size: 16px;
      // color: rgb(51, 51, 51);
      font-weight: bold;
    }
    .leftDistance{
      margin-left: 6px;
    }
    // ============
    .echarts_averagePrice{
      
      display: flex;
      .c_chart_l{
        background-color: #fff;
        border-radius: 10px;
        .c_chart_selet{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 20px;
          .selet_radio{
            .el-select{
              margin-left: 10px;
            }
          }
        }
        .c_chart_price{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 20px;
          .min_max{
            font-size: 12px;
            font-weight: bold;
          }
          .price_big{
            font-size: 36px;
            padding-right: 10px;
          }
          .unit_small{
            font-size: 14px;
            color: rgb(153, 153, 153);
          }
        }
      }
      .average_Price_r{
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        margin-left: 10px;
        padding: 20px 20px 10px 20px;
      }
    }
   
    //------------
    .margin_bot{
      margin-bottom: 20px;
    }
    .q_provinceSecond{
      margin-top: 20px;
      border-radius: 8px;
      background-color: #fff;
      .q_p_title{
        font-size: 22px;
        font-weight: 600;
        text-align: center;
        border-bottom: 4px solid #F5F6F7;
        height: 60px;
        line-height: 60px;
      }
      .q_p_card{
        padding: 20px;
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill,179px);
        grid-gap: 10px;
        // flex-flow:row wrap;
        .el-card{
          width: 178px;
          ::v-deep .el-card__body{
            padding: 10px;
          }
          .card_name{
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 10px;
            color: #606266;
          }
          .row_p{
            padding: 10px;
            background-color: #F5F6F7;
            display: flex;
            justify-content: space-between;
            .row_p_l{
              text-align: center;
              p:first-child{
                font-size: 12px;
                color: #909399;
                margin-bottom: 10px;
              }
            }
          }
        }
      }
      
      .q_p_con{
        padding: 20px 0;
        .q_p_ward{
          color: #303133;
          font-size: 16px;
          font-weight: 600;
          margin-left: 20px;
          .el-icon-map-location{
            font-weight: 600;
            color: rgba(205, 1, 1);
            margin-right: 6px;
            font-size: 20px;
          }
        }
      }
    }
  }
  </style>
  